<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>index</title>
  <link rel="stylesheet" href="css/style.css" />
  <link rel="stylesheet" type="text/css" href="js/layui/css/layui.css">
  <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css">
</head>
<body>
	<div class="section">
		<div class="login_title">
			<div class="nav_title active">
				<img src="images/nav_title_icon.png">
				<span>修改联系电话</span>
			</div>
		</div>

		<div class="login_nr">
			<ul>
				<li>
					<span>电话号码</span>
					<input type="text" maxlength="11" name="" style="width: 55%;" placeholder="请输入电话号码">
					<button class="login_yzm" style="width: 40%;">获取验证码</button>
				</li>
				<li>
					<input type="text" name="" placeholder="输入验证码">
				</li>
			</ul>
			<div class="login_find">
				<button class="find_close" onclick="find_close()">取消</button>
				<button>确认修改</button>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/layui/layui.js"></script>
<script type="text/javascript">
	$(function(){
		$('.login_nr ul li input').focus(function(){
        	$(this).parents('li').removeClass('error');
        	$(this).parents('li').addClass('active');
        });

        $('.login_nr ul li input').blur(function(){
        	$(this).parents('li').removeClass('active');
		});

		var validCode=true;
		$(".login_yzm").click (function  () {
			var time=60;
			$(this).attr("disabled","disabled");
			$(this).css({"cursor":"not-allowed"});
            var $code=$(this);
            if (validCode) {
                validCode=false;
                var t=setInterval(function  () {
                    time--;
                    $code.html(time+"秒后可重新获取");
                    if (time==0) {
                        clearInterval(t);
                    	$code.html("重新获取");
                    	$(".login_yzm").css({"cursor":"pointer"});
                    	$(".login_yzm").removeAttr("disabled");
                        validCode=true;
                    }
                },1000)
            }
		})
	})

	function find_close(){
		parent.layer.closeAll();
	}
</script>
</html>	